<template>
    <div class="Playlist-out">
        <div class="details-top" v-if="titleData.coverImgUrl">
          <div class="bigimg">
          <img :src="titleData.coverImgUrl" alt="">
          </div>
           <div  class="details-top-right">
               <div class="detailsright-item-top">
                 <span class="p1">歌单</span>
                 <span class="p2">{{titleData.name}}</span>
              </div> 
               <div class="detailsright-item-middle">
                  <img :src="titleData.creator.avatarUrl" alt="">
                 <span class="p1">{{titleData.creator.nickname}}</span>
                 <span class="p2">{{titleData.createTime}}</span>
              </div>
              <div class="detailsright-item-main">
                  <div @click="allSong" class="player active"><i class="el-icon-video-play"></i>播放全部</div>
                  <div class="player ji"><i class="iconfont icon-xihuan"></i>收藏</div>
                  <div class="player"> <i class="el-icon-share"></i>分享</div>
              </div> 
               <div class="detailsright-item-bottom">
                 <div class="detailsright-bottom-item">
                    <span class="p1"> 标签:</span><span class="p2" v-for="(item,i) in titleData.tags" :key="i">{{item}}</span>
                 </div>
                 <div class="detailsright-bottom-item1">
                    <span class="p1"> 歌曲:</span><span>{{titleData.trackCount}}</span><span style="padding:0 6px;">播放:</span><span >{{titleData.playCount | numberFormat}}次</span>
                 </div>
                 <div class="detailsright-bottom-item">
                    <span class="p1">简介:</span><span>{{titleData.description}}</span>
                 </div>
              </div> 
            </div> 
        </div>
        <!-- 歌曲 评论 收藏选项-->
        <div class="tableChange"> 
           <ul>
            <li :class="{active:indexChange===1}" @click="indexChange=1">歌曲列表</li>   
            <li :class="{active:indexChange===2}" @click="indexChange=2">评论</li>  
            <li :class="{active:indexChange===3}" @click="indexChange=3">收藏者</li>
          </ul>   
        </div>
        <!-- 歌曲展示 -->
        <titleTable
         v-if="indexChange===1"
        :Songlist=Songlist
        />
        <!-- 评论展示 -->
       <discuss
       :Commentlist=Commentlist
       :hotComments=hotComments
       :total=total
       @pading=pading
      v-if="indexChange===2"
       />
       <collector
       v-if="indexChange===3"
       />
      <!-- <div></div> -->
    </div>
</template>

<script>
import dayjs from 'dayjs'
import titleTable from "./subpackage/titleTable"
import discuss from "./subpackage/discuss"
import collector from "./subpackage/collector"
export default {
    filters: {
			  numberFormat: function (value) {
			  	    let unit = '';
		            var k = 10000,
	                sizes = ['', '万', '亿', '万亿'],
	                i;
	                if(value < k){
	                    value =value;
	                }else{
	                    i = Math.floor(Math.log(value) / Math.log(k));
	                    value = ((value / Math.pow(k, i))).toFixed(2);
	                    unit = sizes[i];
	                }
			        return value+unit;
			  }
			},
   name:"details",
   components:{
    titleTable,
    discuss,
    collector,
   },
   data(){
      return{
         indexChange:1,
         Songlist:[], //获取歌单 里面的歌
         titleData:{},///头部介绍
        Commentlist:[],
        hotComments:[],
        total:0
      }
   },
   mounted(){
      this.getSonglistData()
      this.getComment()
      
   },
   methods:{
      pading(num){
         console.log(num)
        this.getComment(num)
      },
       async getComment(num=1){
      console.log(this.$route.query.id,)
      const {data:res}=await this.$request("/comment/playlist",{
         id:this.$route.query.id,
          offset:num*20,
      })
      console.log("评论",res)
      if(res.code!==200) return 
      this.Commentlist=res.comments
      this.hotComments=res.topComments
      this.total=res.total/20
     },
      async getSonglistData(){
         const {data:res} =await this.$request("/playlist/detail",{
          id:this.$route.query.id
         })
         if(res.code!==200) return 
        res.playlist.tracks.forEach(x=>{
          x.dt=dayjs(x.dt).format('mm:ss')
        })         
         res.playlist.createTime=dayjs(res.playlist.createTime).format('YYYY-MM-DD')
         this.titleData=res.playlist
         this.Songlist=res.playlist.tracks
      },
      allSong(){
         this.$message({
          message: '已成功添加所有歌曲排序播放',
          type: 'success'
        });
      }
   },
   watch:{
             $route(){
          this.getSonglistData()
        console.log("路由变化了")
      }
   }
   
}
</script>

<style lang="less" scoped>
.Playlist-out{
//  padding-bottom:60px;

 width: 1200px;
  height:100%;
  display: flex;
  flex-direction:column;
  margin:50px 90px 90px 90px;
   // padding-bottom:90px;
   .details-top{
     width:100%;
     height:210px;
     display:flex;
     padding-top:10px;
     align-items:center;
     overflow:hidden ;
     .bigimg{
        width:220px;
        height:180px;
      img{
        width:100%;
        height:100%;
        border-radius:10px;
      }
    }
    .details-top-right{
       width:100%;
        height:180px;
       padding-left:15px;
       display:flex;
       flex-direction:column;
       justify-content:space-between;
       .detailsright-item-top{
          width:100%;
          height:30px;
          display:flex;
          align-items: center;
              .p1{
          font-size:12px;
          padding:0 6px;
          border:1px solid #EC4141;
          color:#EC4141;
         }
         .p2{
            font-size:20px;
            margin-left:6px;
            color:#000;
            font-weight: 600px;
         }
       }
      .detailsright-item-middle{
          font-size:13px;
           display:flex;
          align-items: center;
        img{
           width:30px;
           height:30px;
           border-radius:50%;
        }
        .p1{
          
           color:#6597C5;
           padding:0 10px;
        }
      }
      .detailsright-item-main{
         display:flex;
         .player{
            width:100px;
            height:35px;
            text-align: center;
            border:1px solid #ccc;
            line-height:35px;
            border-radius:10px;
            i{
               padding:0 6px;
            }
         }
         .ji{
            margin:0 10px;
         }
         .active{
            color:#fff;
            background-color: brown;
         }
      }
     .detailsright-item-bottom{
         font-size:13px;
      .p2{
         padding-right:6px;
          color:#65A4DA;
      }
         .detailsright-bottom-item{
          .p1{
             margin-right:6px;
             padding:4px 0;
          }
          
         }
         .detailsright-bottom-item1{
            padding:6px 0;
            .p1{
             margin-right:6px;
             padding:4px 0;
          }
         }
     } 
    }
   
   }
   .tableChange{
      margin-top:10px;
      width:100%;
      height:30px;
      ul{
         width:360px;
         display:flex;
         height:100%;
        text-align:center;
         li{
         width:90px;
         margin:0 10px;
         height:30px;
         line-height:30px;
         }
         .active{
            border-bottom:4px solid #EC4141;
            font-size:20px;
            color:#000;
            font-weight:600px;
         }
      }
   }
  
}
    
</style>